<template>
	<view class="process-page">
		<!-- <navBar title="进度图表" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<view class="line-box" @click="selectSection">
			<view class="">区间/站点</view>
			<view class="value">
				<view class="name">{{siteVal == '' ? '请选择区间/站点' : siteVal}}</view> -->
				<!-- <u-icon name="close-circle" color="#2979ff" size="18" v-if="siteVal" @click.native.stop="clearSite"></u-icon> -->

				<!-- <u-icon name="arrow-right" color="#2979ff" size="18"></u-icon>
			</view>
		</view>
		<view class="bottom-box">
			<view class="group_box">
				<view class="btn" v-for="(item,index) in buttonList" :key="index">
					<view class="value" @click="selectName(item, index)" :class="selectedTab == index? 'selected-item': ''">
						{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="p-title">
			累计完成/计划：
			<text>{{(selectedTab == 0 && completedPlan || selectedTab == 2 && completedPlan) || wrdWorkloadInfo.reports && wrdWorkloadInfo.reports.length}}/{{(selectedTab == 0 || selectedTab == 2) ?ghWorkloadInfo.planWorkload || 0:wrdWorkloadInfo.planWorkload || 0}}</text>{{(selectedTab == 0 || selectedTab == 2) && '环' || '孔'}}
		</view> -->

		<!-- 钢环数据表 -->
		<!-- <ghChart ref="ghChartRef" :ghWorkloadInfo="ghWorkloadInfo" @totalWorkload="totalWorkload" :code="constructionMethod" v-show="selectedTab === 0 || selectedTab === 2"></ghChart> -->

		<!-- <wrd-chart :customeStyle="{right:'-15%',top:'42%'}"
			v-show="selectedTab === 1 && wrdWorkloadInfo.reports && wrdWorkloadInfo.reports.length>0"
			:wrdWorkloadInfo="wrdWorkloadInfo" :showEmpty="false"></wrd-chart>
		<u-empty v-if="selectedTab === 1 && wrdWorkloadInfo.reports && wrdWorkloadInfo.reports.length<=0" mode="data"
			text="没有完成的微扰动计划" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
		<u-loading-page :loading="isLoading"  loading-text="数据加载中·····" :color="'#3b9cff'" :bgColor="'rgba(0, 0, 0, 0.5)'"></u-loading-page> -->
			<!-- #ifdef APP-PLUS -->
				<navBar title="进度图表"></navBar>
			<!-- #endif -->
			<web-view :src="src" v-if="src"></web-view>
	</view>
</template>

<script>
	import {
		getProcessByLineSiteSectionId,
		getPlanLineSectionSiteTreeByLike,
		getSteelRingList
	} from '@/api/comprehensive/comprehensive.js'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				siteVal: '',
				buttonList: [
					 // '微扰动', '小钢环'
					{name:'钢环',code:'gh'},
					{name:'微扰动',code:'wrd'},
					{name:'小钢环',code:'xgh'},
				],
				selectedTab: 0,
				pmId: '',
				// 选择回来的线路数据
				formData: null,
				// 钢环进度数据
				ghWorkloadInfo: {},
				// 微扰动进度数据
				wrdWorkloadInfo: {},
				// 已完成的计划
				completedPlan: 0,
				constructionMethod:'gh',
				isLoading:false,
				src: ''
			}
		},
		onLoad(option) {
			if (option.pmId) {
				this.pmId = option.pmId;
				console.log(this.pmId,'项目id')
				this.getSiteList().then(res => {
					this.getList();
				});
				this.src = `${this.$config.SHARE_URL}?token=${getToken()}&page=projectProcess&pmId=${this.pmId}&time=${Date.now()}`
				setTimeout(()=>{
					uni.setNavigationBarTitle({
						title: "进度图表",
					});
				}, 2000)
			}
		},
		onReady(){
			// #ifdef APP-PLUS
				this.setNavBarContent()
			// #endif
		},
		mounted() {
			this.$$off(this.$config.ENV_SELECT_PROJECT)
			this.$$on(this.$config.ENV_SELECT_SITE, res => {
				let obj = {
					bpId: res[0].id,
					bizProjectName: res[0].name,
					sectionName: res[1].name,
					siteId: res[2].id,
					siteName: res[2].name,
					projectCascade: `${res[0].name}/${res[1].name}/${res[2].name}`,
					projectIds: [res[0].id, res[1].id, res[2].id]
				}
				this.formData = Object.assign({}, this.formData, obj)
				this.siteVal = this.formData.siteName
				this.getList();
				console.log('---------------')
				this.src = false
				// this.$nextTick(() => {
				// 	this.src = `${this.$config.SHARE_URL}?token=${getToken()}&page=projectProcess&pmId=${this.pmId}&data=${JSON.stringify(obj)}`
				// })
				if(this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.src = `${this.$config.SHARE_URL}?token=${getToken()}&page=projectProcess&pmId=${this.pmId}&data=${JSON.stringify(obj)}&time=${Date.now()}`
					// #ifdef APP-PLUS
						this.setNavBarContent()
					// #endif
				}, 100)
				// this.webMessage()
			});
		},
		methods: {
			
			//设置navBar
			setNavBarContent(){
				this.$nextTick(() => {
					var height=0;//定义动态的高度变量，如高度为定值，可以直接写
					var width=0;//定义动态的高度变量，如高度为定值，可以直接写
					uni.getSystemInfo({
					//成功获取的回调函数，返回值为系统信息
					success: (sysinfo) => {
					height = sysinfo.windowHeight;//自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
					width = sysinfo.windowWidth;//自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
					console.log(height,width,'宽高')
					},
					complete: () => {
					}
					});
					var currentWebview = this.$scope.$getAppWebview();//获取当前web-view
					setTimeout(function() {
					var wv = currentWebview.children()[0];
					wv.setStyle({//设置web-view距离顶部的距离以及自己的高度，单位为px
					top: 75,//此处是距离顶部的高度，应该是你页面的头部
					height:height,//webview的高度
					width:width,//webview的高度
					scalable:false      //webview的页面是否可以缩放，双指放大缩小
					})
					}, 100);//如页面初始化调用需要写延迟
				})
			},
			
			/**
			 * 钢环完成的工作计划
			 * @param {Number} val
			 */
			totalWorkload(val) {
				this.completedPlan = val
			},
			clearSite() {
				this.siteVal = ''
			},
			selectName(val,index) {
				console.log(val,index);
				this.constructionMethod = val.code
				this.selectedTab = index
				this.$refs.ghChartRef.listData = []
				this.getList()
			},
			goBack(url) {
				uni.navigateBack({})
				// uni.switchTab({
				// 	url: url
				// })
			},
			// 选择区间/站点
			selectSection() {
				
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectSectionAndSite?pmId=${this.pmId}&projectType=zhdx`
				})
			},
			/**
			 * 获取项目的所有线路，选择一条作为默认值
			 */
			getSiteList() {
				return getPlanLineSectionSiteTreeByLike({
					pmId: this.pmId
				}).then(res => {
					if (res.result.length <= 0) return
					// 选择三层结构数据第一条
					this.formData = {
						bizProjectName: res.result[0].name,
						bpId: res.result[0].id,
						sectionName: res.result[0].list[0].name,
						siteName: res.result[0].list[0].list[0].name,
						siteId: res.result[0].list[0].list[0].id,
						projectIds: [
							res.result[0].id,
							res.result[0].list[0].id,
							res.result[0].list[0].list[0].id
						]
					}
					this.siteVal = this.formData.siteName
				})
			},
			/**
			 * 查找线路车站或者区间下的进度
			 * 必须在formData有值的时候调用
			 */
			async getList() {
				console.log(this.selectedTab,'====');
				if (this.formData === null) throw ('请先获取线路数据')
				// uni.showLoading({
				// 	title:'数据加载中...',
				// 	mask:true
				// })
				this.isLoading = true
				const data = {
					pmId: this.pmId,
					lineId: this.formData.projectIds[0],
					lineSiteSectionType: this.formData.projectIds[1],
					lineSiteSectionId: this.formData.projectIds[2],
					constructionMethod:this.constructionMethod
				};
				
				 await getProcessByLineSiteSectionId(data).then(res => {
					this.wrdWorkloadInfo = res.result.wrdWorkloadInfo;
				})
				//微扰动不调用这个接口
				if(this.selectedTab !== 1) {
					await getSteelRingList(data).then(res => {
						this.ghWorkloadInfo = res.result.ghWorkloadInfo;
					})
				}

				this.isLoading = false
				// uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process-page {
		height: 100%;
		min-height: 100vh;
		width: 100%;
		background-color: #f5f5f9;
		/* #ifdef MP-WEIXIN */
			box-sizing: border-box;
			padding-top: 200rpx;
		/* #endif */
	}

	.line-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin: 20rpx 0;
		padding: 20rpx 40rpx;

		.value {
			display: flex;
			align-items: center;

			.name {
				margin-right: 20rpx;
			}
		}

	}

	.selected-item {
		background-color: #f59a23;
		border-radius: 5px;
		color: #fff;
	}

	.bottom-box {
		// background-color: #fff;
		margin: 20rpx 0;
		padding: 10rpx;
		width: 50%;

		.group_box {
			display: flex;
			align-items: center;

			// justify-content: space-around;
			.btn {
				width: 140rpx;
				height: 80rpx;
				background-color: #d7d7d7;
				text-align: center;
				margin: 0 auto;
				border-radius: 5px;
				margin-right: 20rpx;
				.value {
					display: block;
					line-height: 80rpx;

				}
			}
		}

	}

	.p-title {
		padding: 10rpx;

		text {
			color: #31a5db;
			margin: 0 10rpx;
		}
	}

	.p-table {
		.t-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.t-item {
				width: 50%;
				text-align: center;
				border-bottom: 1px solid #f2f2f2;
				border-right: 1px solid #f2f2f2;
				background-color: #cbe9f8;
				padding: 8rpx 0;
			}

			.t-item.name {
				border-right: 1px solid #f2f2f2;
				background-color: #fff;
			}

			.t-item.content {
				background-color: #fff;
			}
		}
	}
</style>
